<template>  
  <div>  
    <div class="header">  
      <div class="comment-count">评论<strong>{{ totalComments }}</strong></div>  
      <div class="tabs">  
        <span class="tab" @click="setActiveTab(0)" :class="{ active: activeTab === 0 }">最新</span>  
        <span class="divider">|</span>  
        <span class="tab" @click="setActiveTab(1)" :class="{ active: activeTab === 1 }">最热</span>  
      </div>  
    </div>  
    <div class="wrapper">   
      <i class="avatar"></i>  
      <textarea v-model="comment" @focus="showCount" @blur="hideCount" @input="updateCount" placeholder="发一条友善的评论" rows="2" maxlength="200" class="txt"></textarea>  
      <button @click="publishComment">发布</button>  
    </div>  
    <div class="wrapper" v-if="showCounter">  
      <span class="total">{{ count }}/200字</span>  
    </div>  
    <div v-if="activeTab === 0" class="list-section">  
      <h3>最新评论</h3>  
      <div class="list">  
        <!-- 最新评论列表 -->  
        <div class="item" v-for="(commentItem, index) in latestComments" :key="index">  
          <img src="./stores/tx1.jpg" alt="" class="tx">  
          <div class="info">  
            <p class="name">{{ commentItem.name }}</p>  
            <p class="text">{{ commentItem.text }}</p>  
            <p class="time">{{ commentItem.time }}</p>  
            <span class="good">  
              <img src="./stores/点赞.png" alt="" @click="incrementLike(index)">  
              <p>{{ commentItem.likes }}</p>  
              <img src="./stores/踩.png" alt="" @click="incrementDislike(index)">  
              <p>{{ commentItem.dislikes }}</p>  
            </span>  
          </div>  
        </div>  
      </div>  
    </div>  
    <div v-if="activeTab === 1" class="list-section">  
      <h3>最热评论</h3>  
      <div class="list">  
        <!-- 最热评论列表 -->  
        <div class="item" v-for="(commentItem, index) in hottestComments" :key="index">  
          <img src="./stores/tx1.jpg" alt="" class="tx">  
          <div class="info">  
            <p class="name">{{ commentItem.name }}</p>  
            <p class="text">{{ commentItem.text }}</p>  
            <p class="time">{{ commentItem.time }}</p>  
            <span class="good">  
              <img src="./stores/点赞.png" alt="" @click="incrementLike(index)">  
              <p>{{ commentItem.likes }}</p>  
              <img src="./stores/踩.png" alt="" @click="incrementDislike(index)">  
              <p>{{ commentItem.dislikes }}</p>  
            </span>  
          </div>  
        </div>  
      </div>  
    </div>  
  </div>  
</template>  

<script>
export default {  
  data() {  
    return {  
      comment: '',  
      comments: [],  
      count: 0,  
      showCounter: false,  
      activeTab: 0, 
      avatars: [  
        './stores/tx1.jpg',  
        './stores/tx2.jpg',  
        './stores/tx3.jpg',  
        './stores/tx4.jpg',  
      ],  
      names: [  
        '换胃思烤',  
        '蚂蚁牙白',  
        '近猪者吃',  
        '后悔有妻',  
      ],  
    };  
  },  
  computed: {  
    latestComments() {  
      return this.comments.slice().sort((a, b) => new Date(b.time) - new Date(a.time));  
    },  
    hottestComments() {  
      return this.comments.slice().sort((a, b) => b.likes - a.likes);  
    },  
    totalComments() {  
      return this.comments.length;  
    },  
  },  

  methods: {
    showCount() {
      this.showCounter = true;
    },
    hideCount() {
      this.showCounter = false;
    },
    updateCount() {
      this.count = this.comment.trim().length;
    },
    setActiveTab(index) {  
      this.activeTab = index;  
    },  
    publishComment() {  
      if (this.comment.trim() !== '') {  
        const newComment = {  
          text: this.comment,  
          time: new Date().toISOString().replace(/T/, ' ').substring(0, 19),  
          likes: 0,   
          dislikes: 0, 
          avatar: this.getRandomAvatar(),  
          name: this.getRandomName(),  
        };  
        this.comments.push(newComment);  
        this.comment = '';  
        this.showCounter = false;  
      }  
    },  
    incrementLike(index) {
      this.comments[index].likes += 1;
    },
    incrementDislike(index) {
      this.comments[index].dislikes += 1;
    },
    getRandomAvatar() {
      return this.avatars[Math.floor(Math.random() * this.avatars.length)];
    },
    getRandomName() {
      return this.names[Math.floor(Math.random() * this.names.length)];
    },
  },
};
</script>

<style scoped>
  .wrapper {
    position: relative;
    left: -60px;
    min-width: 400px;
    max-width: 800px;
    display: flex;
    justify-content: flex-end;
  }

  .avatar {
    overflow: hidden;
    width: 48px;
    height: 48px;
    margin-right: 20px;
    border-radius: 50%;
    background: url('./stores/bilibili.jpg') no-repeat center / cover;
  }

  .tx {
    position: relative;
    left: -60px;
    top: 35px;
    width: 48px;
    height: 45px;
    border-radius: 50%;
  }

  .wrapper textarea {
    flex: 1;
    height: 40px;
    width: 400px;
    padding: 10px;
    border-color: transparent;
    outline: none;
    resize: none;
    background: #f5f5f5;
    border-radius: 4px;
    transition: all 0.5s;
  }

  .wrapper textarea:focus {
    height: 45px;
    border-color: #e4e4e4;
    background: #fff;
  }

  .wrapper button {
    width: 70px;
    height: 41px;
    margin-left: 10px;
    border: none;
    color: #fff;
    background: #00aeec;
    border-radius: 5px;
    cursor: pointer;
  }

  .wrapper .total {
    margin-right: 80px;
    margin-top: 5px;
    color: #999;
    opacity: 1;
    transition: all 0.5s;
  }

  .info {
    position: relative;
    top: -15px;
  }

  .info .name {
    color: #fb7299;
  }

  .info .time {
    color: #a09f9f;
    font-size: 12px;
  }

  .good {
    width: 100px;
    height: 15px;
    position: absolute;
    left: 120px;
    top: 48px;
    display: flex;
  }

  .good img {
    margin-left: 8px;
  }

  .good p {
    margin-left: 5px;
    font-size: 10px;
    color: #a09f9f;
  }
  .header { 
  width: 500px; 
  display: flex;  
  justify-content: space-between;
  align-items: center;  
  margin-bottom: 15px;  
}  
  
.comment-count {  
  font-size: 25px;   
  font-weight: 700;  
  margin-right: 5px;   
}  
  
.tabs {  
  display: flex;  
  align-items: center;  
}  
  
.tab {  
  cursor: pointer;  
  padding: 5px 15px; 
  margin-left: -1px; 
  border: 1px solid transparent;   
  border-radius: 5px;   
  font-size: 12px; 

}  
  
.tab.active {  
  color: #fb7299; 
  border: 2px solid pink;  
}  
  
.divider {  
  color: #ccc;  
  margin: 0 10px; 
}  
</style>
